<template>
  <div class="dialog">
    <el-dialog
      :title="isTitle ? '编辑菜单' : '创建菜单'"
      :visible="isEnterpriseDialog"
      @closed="addCancel"
    >
      <el-form
        ref="formRef"
        label-width="120px"
        :model="formData"
        :rules="rules"
      >
        <el-form-item label="企业名称" prop="shortName">
          <el-input v-model="formData.shortName" />
        </el-form-item>
        <el-form-item label="所属公司" prop="company">
          <el-input v-model="formData.company" />
        </el-form-item>
        <el-form-item label="城市地区" prop="province">
          <el-select
            v-model.trim="form.provinces"
            placeholder="请选择"
            class="select_one"
            @change="changeFn"
          >
            <el-option
              v-for="(item, index) in provincesList"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
          <el-select v-model="form.citys" placeholder="请选择" class="select_one">
            <el-option
              v-for="(item, index) in citysList"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="方向(企业标签)" prop="tags">
          <el-input v-model="formData.tags" />
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input
            v-model="formData.remarks"
            type="textarea"
            style="width: 280px"
          />
        </el-form-item>
      </el-form>
      <!-- 底部 -->
      <el-row slot="footer" type="flex" justify="center" align="middle">
        <el-col :span="6">
          <el-button size="small" @click="addCancel">取消</el-button>
          <el-button size="small" type="primary" @click="addOk">确定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { provinces, citys } from '@/assets/city'
import { addEnterpriseAPI, editEnterpriseAPI } from '@/api/index'
export default {
	name: 'EnterpriseDialog',
	props: {
		isEnterpriseDialog: Boolean,
		editDate: {
			type: Object,
			default: () => {}
		},
		rowId: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			provincesList: provinces(), // 城市
      citysList: [], // 地区
			isTitle: false,
			form: {
        provinces: '', // 城市
        citys: '' // 地区
      },
			formData: {
				shortName: '',
				company: '',
				province: '',
				city: '',
				tags: '',
				remarks: '',
				isFamous: false,
				number: 0
			},
			rules: {
        shortName: [{ required: true, message: '企业名称不能为空', trigger: 'blur' }],
        company: [{ required: true, message: '所属公司不能为空', trigger: 'blur' }],
        provinces: [{ required: true, message: '城市地区不能为空' }],
        citys: [{ required: true, message: '城市地区不能为空' }],
        tags: [{ required: true, message: '方向不能为空', trigger: 'blur' }],
        remarks: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
      }
		}
	},

	methods: {
		//  选择城市的方法
    changeFn() {
			// 获取地区赋值给本地
      this.citysList = citys(this.form.provinces)
    },
		// 点击确定，通过id来判断是确定还是修改
		addOk() {
			this.$refs.formRef.validate(async isOk => {
				if (isOk) {
					if (this.rowId) {
						// 编辑
						this.isTitle = true
						this.formData.city = this.form.citys
						this.formData.province = this.form.provinces
						const res = await editEnterpriseAPI({
							id: this.rowId,
							shortName: this.formData.shortName,
							company: this.formData.company,
							province: this.formData.province,
							city: this.formData.city,
							tags: this.formData.tags,
							remarks: this.formData.remarks,
							isFamous: this.formData.isFamous,
							number: this.formData.number
						})
						console.log(res);
						this.$message.success('编辑成功!')
					} else {
						// 新增
						console.log(this.isTitle = false);
						this.formData.city = this.form.citys
						this.formData.province = this.form.provinces
						await addEnterpriseAPI(this.formData)
						this.$message.success('添加成功!')
					}
					this.$emit('update:isEnterpriseDialog', false)
					this.$parent.getEnterpriseList()
				}
			})
		},
		// 点击取消按钮，清空数据，并关闭弹出层
		addCancel() {
			this.formData = {
				shortName: '',
				company: '',
				province: '',
				city: '',
				tags: '',
				remarks: '',
				isFamous: false,
				number: 0
			}
			this.form = {
        provinces: '', // 城市
        citys: '' // 地区
      }
			this.$emit('update:isEnterpriseDialog', false)
		}
	}
}
</script>

<style scoped>
::v-deep .el-dialog{
	border-radius: 15px;
}
::v-deep .el-dialog__header{
	background-color:#409eff;
	border-radius: 15px 15px 0 0;

}
::v-deep .el-dialog__title{
	color:#fff;
}
::v-deep .el-dialog__close{
	color:#fff
}
::v-deep .el-input{
	width: 400px !important;
}
::v-deep .el-input--suffix{
	width: 200px !important;
}
::v-deep .el-textarea__inner{
	width: 400px;
}
</style>